<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>login</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="../css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<script type="text/javascript" src="../js/vue.js"></script>
<!-- <script type="text/javascript" src="../js/index.js"></script> -->
<style type="text/css" media="screen">
</style>
</head>
<body>
	<div class="container col-md-4 col-md-offset-4">
		<h3 class="text-center">用户{{login}}</h3>
		<form>
			<div class="form-group">
				<label for="username">用户名:</label>
				<input type="username"  class="form-control"   placeholder="请输入用户名" v-model="username">
			</div>
			<div class="form-group">
				<label for="password">密码:</label>
				<input type="passworda"  class="form-control"   placeholder="请输入密码" v-model="password">
			</div>

		<button  class="btn btn-primary btn-lg btn-block" @click.prevent="loginCheck">立即{{login}}</button>
		</form>

		<br>
		<div class="alert alert-danger" role="alert" v-if="warning">用户名或密码输入错误！</div>
		<!--{{username}}-->
		<!--{{password}}-->
	</div>
	<script type="text/javascript">
		var login = new Vue({
			el:".container",
			data:{
				username:"",
				password:"",
				warning:false,
				login:"登录",
				message:"登录"
			},
			methods:{
			    loginCheck:function(){
                    if(sessionStorage.tag == 1 && sessionStorage.username == this.username) {
                        alert('您已登陆,请勿重复登陆,3秒后将自动跳回首页');
                        setTimeout(function() {
                            location.href = "index.html";
                        },3000);
                        return false;
                    }

			        var that = this;

			        if(that.username=="" || that.password=="") {
			            alert('用户名和密码不能为空');
					}else {
                        console.log(this.username);
                        $.ajax({
                            url:'http://news.cn/index.php/index/Page/login',
                            type:'post',
                            data:{'username':that.username,'password':that.password},
                            dataType:'json',
                            success:(data)=> {
                                console.log(data);
                                if(data.code == 1) {
                                    sessionStorage.username = this.username;
                                    sessionStorage.id = data.data.id;
                                    sessionStorage.tag = 1;

                                    location.href="index.html";
                                }else  {
                                    that.warning = true;
                                }
                            }
                        })
					}

				}
			}
		})
	</script>
</body>
</html>